<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/plugins/iview/css/iview.css">

</head>
<body>

<div id="app" style="margin: 5px">

    <create ref="createtem" @save="created"></create>
    <edit ref="edittem" @edit="edited"></edit>
    <div style="background: #f5f7f9; padding: 10px 30px;">

              标题:<input v-model="params.title"  autocomplete="off" spellcheck="false" type="text" placeholder="标题" class="ivu-input ivu-input-default" style="width: 160px">
         创建人昵称:<input v-model="params.userNickName"  autocomplete="off" spellcheck="false" type="text" placeholder="创建人昵称" class="ivu-input ivu-input-default" style="width: 160px">
         创建时间:<Date-Picker v-model="createdDate" @on-change="dateChange($event,'createdDate')" format="yyyy-MM-dd" type="daterange" placeholder="选择时间" style="width: 200px"></Date-Picker>
         最后修改时间:<Date-Picker v-model="lastModifiedDate" @on-change="dateChange($event,'lastModifiedDate')" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placeholder="选择时间" style="width: 280px"></Date-Picker>

        <i-button type="warning"  @click="search"> 搜索 </i-button>
        <i-button type="success"  @click="addShow"> +添加 </i-button>
    </div>


    <div style="min-height: 600px;">
        <i-table border :columns="columns" :data="tableData" :loading="loading"></i-table>
    </div>
    <div style="text-align: center;margin: 15px;">
        <Page :total="params.totalElements" :page-size="params.size" @on-change="changePage" show-total></Page>
    </div>


</div>
<script src="/plugins/vue/vue.min.js"></script>
<script src="/plugins/iview/js/iview.min.js"></script>
<script src="/plugins/vue/httpVueLoader.js"></script>
<script src="/plugins/vue/axios.min.js"></script>
<script src="/app/js/i-axios.js"></script>
<script src="/app/js/utils.js"></script>

<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        components: {
            'create': httpVueLoader('create.vue'),
            'edit': httpVueLoader('edit.vue'),
        },
        data() {
            return {
                loading:false,
                columns: [
                    {
                        type: 'index',
                        width:40,
                        align: 'center'
                    },

                  {
                      title: '主键id',
                      key: 'id',
                      align: 'center'
                  },
                  {
                      title: '标题',
                      key: 'title',
                      align: 'center'
                  },
                  {
                      title: '创建人昵称',
                      key: 'userNickName',
                      align: 'center'
                  },
                  {
                      title: '手机号',
                      key: 'mobile',
                      align: 'center'
                  },
                  {
                      title: '邮箱',
                      key: 'email',
                      align: 'center'
                  },
                  {
                      title: '详细内容',
                      key: 'detail',
                      align: 'center'
                  },
                  {
                      title: '创建时间',
                      key: 'createdDate',
                      align: 'center'
                  },
                  {
                      title: '最后修改时间',
                      key: 'lastModifiedDate',
                      align: 'center'
                  },{
                        title: '测试',
                        key: 'typeTest',
                        align: 'center',
                        render: (h, params) => {
                            let obj = this.typeTestData.find(i=>i.val==params.row.typeTest)
                            return h('div', obj.lab);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            let btns = [];

                            btns.push(
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index)
                                        }
                                    }
                                }, '修改')
                            )
                            btns.push(
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.index)
                                        }
                                    }
                                }, '删除')
                            )
                            return h('div', btns);
                        }
                    }
                ],
                tableData:[],
                typeTestData:[
                    {
                        val:"WX",
                        lab:"微信",
                    },{
                        val:"PHONE",
                        lab:"手机号",
                    },
                ],
                params:{
                    title:undefined,
                    userNickName:undefined,
                    createdDate:undefined,
                    lastModifiedDate:undefined,
                    page:0,
                    size:10,
                    totalElements:0,
                },
                    createdDate:undefined,
                    lastModifiedDate:undefined,
                editIndex:undefined,
            }
        },
        mounted() {
            this.load();
        },
        methods:{
            load() {
                console.info("table load")
                let _this = this;
                _this.loading=true;
                iget('/admin/news',this.params,
                    successRes => {
                        _this.tableData=successRes.data.content
                        _this.loading=false;
                    },failureRes => {
                        console.info("加载数据异常",failureRes)
                    }
                )
            },
            search() {
                this.changePage(0)
            },
            changePage: function (page) {
                this.params.page = page-1;
                this.load();
            },
            edit(index){
                this.editIndex=index;
                this.$refs.edittem.edit(Object.assign({}, this.tableData[index]));
            },
            edited(data){
                this.tableData.splice(this.editIndex,1,data);
            },
            dateChange(e,name){
                this.params[name]=e.toString();
            },
            addShow(){
                this.$refs.createtem.show=true;
            },
            created(data){
                this.tableData.push(data);
            },
            del(index){
                let _this = this;
                let d = _this.tableData[index]
                idelete('/admin/news/'+d.id,null,
                    successRes => {
                        this.$Notice.error({
                            title: '删除成功'
                        });
                        _this.tableData.splice(index,1);
                    },failureRes => {
                        console.info("加载数据异常",failureRes)
                    }
                )
            },
        }
    });
</script>

</body>
</html>